<template>
	<view class="xzfx-waybill-list">
		<view class="xzfx-waybill-item" v-for="(item,index) in list" :key="index" @click.stop="$go('/pages/waybill/details?orderId=' + item.id + '&type=' + type)">
			<view class="top">
				<view class="number">
					订单编码:
					<text>{{ item.orderNo }}</text>
				</view>
				<view v-if="item.orderStatusStr === '已取货'" class="state" style="color: #007aff;">{{ item.orderStatusStr }}</view>
				<view v-else-if="item.orderStatusStr === '已送达'" class="state" style="color: #007aff;">{{ item.orderStatusStr }}</view>
				<view v-else-if="item.orderStatusStr === '已收货'" class="state" style="color: #4cd964;">{{ item.orderStatusStr }}</view>
				<view v-else-if="item.orderStatusStr === '待取货'" class="state" style="color: #f0ad4e;">{{ item.orderStatusStr }}</view>
				<view v-else-if="item.orderStatusStr === '待支付'" class="state" style="color: #f0ad4e;">{{ item.orderStatusStr }}</view>
				<view v-else class="state">{{ item.orderStatusStr }}</view>
			</view>
			<view class="body">
				<view class="info-item">
					<view class="label">货物信息:</view>
					<view class="value">
						{{ item.goodsType || '其他' }}
						<text>|</text>
						{{ item.goodsVolume || 0 }}m³
						<text>|</text>
						{{ item.goodsWeight || 0 }}kg
					</view>
				</view>
				<view class="info-item">
					<view class="label">接单时间:</view>
					<view class="value">{{ item.createTime || "-" }}</view>
				</view>
				<view class="info-item">
					<view class="label">发货时间:</view>
					<view class="value">{{ item.sendStartTime || "-" }}{{ item.sendEndTime ? " - " + item.sendEndTime : "" }}</view>
				</view>
				<view class="info-item">
					<view class="label">收货时间:</view>
					<view class="value">{{ item.receiveEndTime || "-" }}</view>
				</view>
				<view class="info-item">
					<view class="label">发货地点:</view>
					<view class="value">{{ item.sendLocation || "-" }}</view>
				</view>
				<view class="info-item">
					<view class="label">收货地点:</view>
					<view class="value">{{ item.receiveLocation || "-" }}</view>
				</view>
			</view>
			<view class="bottom">
				<view v-if="type === '1'" class="price">
					<text style="padding-right: 10rpx;">报价:</text>
					{{ item.offerPrice || 0 }}
					<text>元</text>
				</view>
				<view v-if="type === '2'" class="price">
					<text style="padding-right: 10rpx;">净得运费:</text>
					{{ item.offerPrice || 0 }}
					<text>元</text>
				</view>
				<view class="bottom-btns">
					<view v-if="type === '2' && item.actionList.indexOf('取消接单') !== -1" class="btn" @click.stop="submitFn(item, 'truckCancel')">取消接单</view>
					<view v-if="type === '1' && item.actionList.indexOf('取消订单') !== -1" class="btn" @click.stop="submitFn(item, 'ownerCancel')">取消订单</view>
					<view v-if="type === '2' && item.actionList.indexOf('已取货') !== -1" class="btn" @click.stop="submitFn(item, 'take')">
						已取货
					</view>
					<view v-if="type === '2' && item.actionList.indexOf('已送达') !== -1" class="btn" @click.stop="submitFn(item, 'arrive')">
						已送达
					</view>
					<view v-if="type === '1' && item.actionList.indexOf('确认收货') !== -1" class="btn" @click.stop="submitFn(item, 'confirm')">
						确认收货
					</view>
					<view v-if="type === '1' && item.actionList.indexOf('去支付') !== -1" class="btn" @click.stop="payFn(item)">
						立即支付
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"xzfx-waybill-list",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			type: {
				type: String
			}
		},
		methods: {
			submitFn(item, fn){
				this.$utils.system.loading("正在取消，请稍后");
				this.$apis.waybill[fn]({
					orderId: item.id
				}).then(res => {
					this.$emit("success")
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					uni.hideLoading();
				});
			},
			payFn(item){
				this.$utils.system.loading("请稍后");
				uni.login({
					success: response => {
						this.$apis.waybill.pay({
							orderId: item.id,
							code: response.code
						}).then(res => {
							uni.requestPayment({
								provider: "wxpay",
								orderInfo: res,
								timeStamp: String(res.timeStamp),
								nonceStr: res.nonceStr,
								package: res.package,
								signType: res.signType,
								paySign: res.paySign,
								success: (e) => {
									uni.redirectTo({
										url: "/pages/waybill/pay-result?type=success"
									});
								},
								fail: (e) => {
									uni.navigateTo({
										url: "/pages/waybill/pay-result?type=error"
									});
								},
								complete: () => {
									uni.hideLoading();
								}
							})
						}).catch(err => {
							console.log(err)
						}).finally(() => {
							uni.hideLoading();
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.xzfx-waybill-list{
		padding: $xzfx-spacing 0;
		.xzfx-waybill-item{
			margin: $xzfx-spacing;
			background-color: #fff;
			padding: $xzfx-spacing;
			border-radius: 20rpx;
			.top{
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f1f1f1;
				padding-bottom: $xzfx-spacing;
				margin-bottom: $xzfx-spacing;
				.number{
					color: #666666;
					text{
						color: #333333;
						margin-left: 10rpx;
					}
				}
				.state{
					color: #666666;
					font-size: 28rpx;
				}
			}
			.body{
				background: linear-gradient(to right, #f1f4fa, #ffffff);
				border-radius: 10rpx;
				padding: 15rpx 20rpx;
				margin: 15rpx 0;
				.info-item{
					display: flex;
					font-size: 24rpx;
					padding: 5rpx 0;
					.label{
						width: 110rpx;
						color: #666666;
					}
					.value{
						width: calc(100% - 110rpx);
						display: flex;
						align-items: center;
						color: #333333;
						text{
							padding: 0 10rpx;
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price {
					// height: 46rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: red;
					display: flex;
					align-items: center;
					
					text {
						font-size: 28rpx;
						margin-left: 5rpx;
						color: #444;
					}
				}
				.bottom-btns{
					display: flex;
					align-items: center;
					.btn{
						display: flex;
						justify-content: center;
						align-items: center;
						height: 60rpx;
						border-radius: 30rpx;
						background: $xzfx-theme;
						color: #FFFFFF;
						font-size: 28rpx;
						padding: 0 30rpx;
						overflow: hidden;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>